<template>
  <el-table :data="data" border>
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column prop="type" label="设计人员" width="150" show-overflow-tooltip>
      <template v-slot="{ row }">
        <span>{{ (row.designers || []).map((item: any) => item?.name).join('，') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="紧急状态" width="100" show-overflow-tooltip>
      <template v-slot="{ row }">
        <span>{{ EmergencyStateLabel[row.emergency_state] }}</span>
      </template>
    </el-table-column>
    <el-table-column label="预期开始时间" width="120" show-overflow-tooltip>
      <template v-slot="{ row }">
        <span>{{ formatDate(row.start_date) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="预期完成时间" width="120" show-overflow-tooltip>
      <template v-slot="{ row }">
        <span>{{ formatDate(row.end_date) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="beneficiary_name" label="状态" width="100" show-overflow-tooltip>
      <template v-slot="{ row }">
        <DesignStatus :data="row" />
      </template>
    </el-table-column>
    <el-table-column label="实际开始时间" width="180" show-overflow-tooltip>
      <template v-slot="{ row }">
        <span>{{ formatDate(row.real_start_date, 'time') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="完成时间" width="180" show-overflow-tooltip>
      <template v-slot="{ row }">
        <span>{{ formatDate(row.complete_date, 'time') }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="设计用时" width="100" show-overflow-tooltip>
      <template v-slot="{ row }">
        <DesignUseTime :data="row" />
      </template>
    </el-table-column>

    <el-table-column prop="remark" label="备注" show-overflow-tooltip> </el-table-column>
  </el-table>
</template>

<script lang="ts" setup name="designWorkList">
import { formatDate } from '/@/utils';
import DesignUseTime from './design-use-time.vue';
import DesignStatus from './design-status.vue';
import { EmergencyStateLabel } from '/@/constants';

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
</script>
